<template>
    <div class="online-services">
      <ul>
        <li class="tc">
          <time>12:00</time>
          <section class="mt10">
            <img src="../img/user_top.jpg"/>
            <span class="chat-msg ml20">发霉了啊！你吃了没！别吃哦小心中毒</span>
          </section>
        </li>
        <li class="tc">
          <time>12:00</time>
          <section class="mt10">
            <span class="chat-msg-two mr20">发霉了啊！你吃了没！别吃哦小心中毒</span>
            <img src="../img/user_top.jpg"/>
          </section>
        </li>
      </ul>
      <footer>
        <i-tabs :current="current_scroll" scroll @change="handleChangeScroll" i-class="services-list" color="#41B962">
          <i-tab key="tab1" title="商品价格不对" i-class="select-services"></i-tab>
        </i-tabs>
        <section class="flex align-center">
          <textarea placeholder="请输入您的问题..." id="text-content"></textarea>
          <button class="tc">发送</button>
        </section>
      </footer>
    </div>
</template>

<script type="ECMAScript 6">
  export default {
    name: "online-servicess",
    data () {
      return {
        current_scroll: 'tab1'
      };
    },
    methods:{
      handleChangeScroll (e) {
        this.current_scroll = e.mp.detail.key;
      }
    }
  };
</script>

<style lang="stylus" scoped>
  .online-services
    padding: 0 20px 60px 20px;
    &>ul
      li
        width: 100%; margin-top: 14px; text-align center;
        time
          display: inline-block; padding: 5px 13px;font-size: 14px; color: #747474; border-radius: 13px; background: #DCDCDC;
        section
          display: flex; align-items: center;min-height: 50px; margin-top: 8px;
          span
            display: inline-block; padding: 11px 14px;font-size: 14px; line-height 1.5; color: #747474; background: #FFFFFF; border-radius: 5px; text-align left;
          img
            width: 50px; height: 50px; border-radius: 10px;
  .chat-msg-two
    position relative; background #22B14A!important; color #fff!important;
  .chat-msg-two:after
    position absolute; content ""; right -10px; top 35%;border-top 6px solid transparent; border-bottom 6px solid transparent; border-left 10px solid #22B14A;
  .chat-msg
    position relative;
  .chat-msg:before
    position absolute; content ""; left -10px; top 35%;border-top 6px solid transparent; border-bottom 6px solid transparent; border-right 10px solid #fff;
  /*输入框内容样式*/
  .online-services footer{position: fixed;left: 0; bottom: 0; background: #fff; border-top: 1px solid #F2F2F2; width 100%;}
  .online-services footer section{ min-height: 60px; padding: 0 13px; border-top: 1px solid #F2F2F2 }
  .online-services footer section textarea{flex 1; display inline-block; height: 40px; width 100%;font-size: 14px; color: #B5B5B5; border:  1px solid #D5D5D5; border-radius: 3px;line-height 1.5;}
  .online-services footer section button{margin-left: 10px ;flex: 0 0 110px; height: 40px; line-height: 40px; font-size: 17px; background: #41B962; color: #fff;}
</style>

<style lang="stylus">
  .services-list
    height auto!important; padding 3px 15px!important;
  .select-services
    width auto!important;height 40px!important; line-height 40px!important; padding 0 15px!important; background: #F2F2F2!important;  border-radius: 20px!important; color #525252!important;
  .i-tabs-tab-bar
    display none!important;
</style>
